import React, { FC, useEffect, useState } from "react";
import { List, Avatar, Space } from 'antd';
import { MessageOutlined, LikeOutlined, EyeOutlined } from '@ant-design/icons';
import { ArticleSummaryModel } from "../models/articleSummaryModel";
import { useStore } from "react-redux";
import { RootState } from "../store/reducer";
import { useHistory } from "react-router";

interface Props {
    listData: ArticleSummaryModel[]
}

interface IconTextProps {
    text: string,
    icon: FC,
}

const IconText: FC<IconTextProps> = ({ icon, text }) => (
    <Space>
        {React.createElement(icon)}
        {text}
    </Space>
);

export const ArticleSummaryList: FC<Props> = ({ listData }) => {
    const route = useHistory();
    return (
        <List
            itemLayout="vertical"
            size="large"
            pagination={{
                onChange: page => {
                    console.log(page);
                },
                pageSize: 3,
            }}
            dataSource={listData}
            footer={
                <div>
                    <b>ant design</b> footer part
                </div>
            }
            renderItem={item => (
                <List.Item
                    key={item.title}
                    actions={[
                        <IconText icon={EyeOutlined} text={`${item.seen}`} key="list-vertical-star-o" />,
                        <IconText icon={LikeOutlined} text={`${item.like}`} key="list-vertical-like-o" />,
                        <IconText icon={MessageOutlined} text={`${item.comments}`} key="list-vertical-message" />,
                    ]}
                    extra={
                        <img height={300} alt="logo" src={item.cover} />
                    }
                    onClick={e => route.push(item.href)}
                >
                    <List.Item.Meta
                        avatar={<Avatar src={item.cover} />}
                        title={<a href={item.href}>{item.title}</a>}
                    />
                    {item.description}
                </List.Item>
            )}
        />
    )
}